<template>
  <div class="container">
    <TopCell text="栏目管理" @click="$router.push('/')" />
    <div class="tips">点击删除一下频道</div>
    <div class="categoryList">
      <div
        class="category"
        v-for="(categroy, index) in activeList"
        :key="index"
        @click="deactive(index)"
      >
        {{ categroy.name }}
      </div>
    </div>
    <div class="tips">点击添加以下频道</div>
    <div class="categoryList">
      <div
        class="category"
        v-for="(categroy, index) in deactiveList"
        :key="index"
        @click="active(index)"
      >
        {{ categroy.name }}
      </div>
    </div>
  </div>
</template>

<script>
import TopCell from "../components/TopCell";
export default {
  components: {
    TopCell,
  },
  data() {
    return {
      activeList: [],
      deactiveList: [],
    };
  },
  watch: {
    activeList() {
      localStorage.setItem("active", JSON.stringify(this.activeList));
    },
    deactiveList() {
      localStorage.setItem("deactive", JSON.stringify(this.deactiveList));
    },
  },
  methods: {
    deactive(index) {
      if (this.activeList.length == 1) {
        this.$toast("至少有一个");
        return;
      }
      // 先储存在删除
      console.log(this.activeList[index]);

      this.deactiveList.push(this.activeList[index]);

      this.activeList.splice(index, 1);
    },
    active(index) {
      console.log(this.activeList[index]);
      this.activeList.push(this.deactiveList[index]);
      this.deactiveList.splice(index, 1);
      },
  },
  created() {
    if (localStorage.getItem("active")) {
      this.activeList = JSON.parse(localStorage.getItem("active"));
      if (localStorage.getItem("deactive")) {
        this.deactiveList = JSON.parse(localStorage.getItem("deactive"));
      }
    } else {
      this.$axios({
        method: "get",
        url: "/category",
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      }).then((res) => {
        let data = res.data.data;
        // this.activeList = Array.from(new Set(res.data.data));
        let obj = {};
        data = data.reduce((current, next) => {
          obj[next.name] ? "" : (obj[next.name] = true && current.push(next));
          return current;
        }, []);
        this.activeList = data;
        console.log(this.activeList);
      });
    }
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 0 15 /360 * 100vw;
  .tips {
    font-size: 12/360 * 100vw;
    color: #999;
    margin: 15 /360 * 100vw 0;
  }
  .categoryList {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    &::after {
      display: block;
      content: "";
      width: 20%;
      height: 0;
    }
    .category {
      margin-bottom: 10 /360 * 100vw;
      width: 70 /360 * 100vw;
      height: 30 /360 * 100vw;
      line-height: 30 /360 * 100vw;
      border: 1px solid #ccc;
      text-align: center;
    }
  }
}
</style>